/* eslint-disable */
//查询结果列表
<template>
	<h1 class="query_title">相似病历列表</h1>
	<div class="querylist_container">
		<el-row>
			<el-col :span="6" class="header name">姓名</el-col>
			<el-col :span="6" class="header sex">性别</el-col>
			<el-col :span="6" class="header age">年龄</el-col>
			<el-col :span="6" class="header diagnose">诊断</el-col>
		</el-row>
		<el-scrollbar v-loading="loading" height="320px">
			<div class="query_span_container">
				<el-row @click="onQueryItemClick(item)" class="item" v-for="item in dataArray">
					<el-col :span="6" class="query_span">{{item.name}}</el-col>
					<el-col :span="6" class="query_span">{{item.gender}}</el-col>
					<el-col :span="6" class="query_span">{{item.age}}</el-col>
					<el-col :span="6" class="query_span diagnose_container">  <!--diagnose_container--> 
						<div class="diagnoseItem" v-for="d in item.diagnose.slice(0,3)">
							{{d}}
						</div>
					</el-col>
				</el-row>
			</div>
		</el-scrollbar>
	</div>
</template>

<script>
export default {
  /*
  * 组件名
  */
  name: 'QueryList',
  
  /*
  * 向组件外部暴露的变量
  */
  props: {
    dataArray: Object,
	loading: Boolean,
  },
  
  /*
  * 组件数据
  */
  data(){
    return{

		
    }
  },
  
  /*
  * 组件内部方法
  */
  methods:{
	  onQueryItemClick:function(e){
		  console.log(e.age);
		  this.$emit("checkQueryItem",e);
	  }
  },
  
  computed:{

  },
  
  /*
  * 生命周期函数,页面创建时调用
  */
  created(){

  },
  
  /*
   *  监听数据发生改变
   */
  watch: {
	  
  },
}
</script>

<!-- 组件内部样式 -->
<style scoped>

.querylist_container{
	height: 320px;
	/* border-bottom: 2px gray solid; */
}
	
.header{
	height: 50px;
	text-align: center;
	color: #ffffff;
	font-family: Microsoft YaHei UI;
	font-style: normal;
	font-size: 24px;
	line-height: 46px;
}
	
.name{
	background-color:#83cbff ;
}

.sex{
	background-color: #b6cce2;
}

.age{
	background-color:#83cbff ;
}

	
.diagnose{
	background-color: #b6cce2;

}

.diagnose_container{
	text-align: left;
	padding-left: 50px;
}

.diagnoseItem{
	background-color: #e0fffb;
	border-radius: 5px;
	display: inline-block;
	padding: 5px;
	margin: 2px; 
	font-weight: bold;
}

.item{
	border-bottom: 2px #C4C4C4 solid;
	text-align: center;
	height:100px;
	background-color: #CFEAFF;
	font-family: Microsoft YaHei UI;
	font-style: normal;
	font-weight: normal;
	font-size: 16px;
	line-height: 25px;
}

.item:hover{
	background-color:#ffe7e7;
	cursor: pointer;
}

.query_span{
	font-weight: bold;
}

</style>
